
<template>
  <el-form-item
    :key="element.metaRefresh"
    :prop="element.field"
    :label="element.componentProps.label"
    :rules="element.componentProps.rules"
  >
    <el-date-picker
        v-model="element.componentProps.value"
        @change="dateChange"
        type="date"
        placeholder="选择一天"
        size="default"
      />
  </el-form-item>
</template>
 
<script lang="ts">
import {
  defineComponent,
  ref,
  inject,
  watch,
  toRefs,
  reactive,
  computed,
} from "vue";
import type { LowCodeImp } from "@/components/low-code/core/type";
export default defineComponent({
  name: "dateWidget",
  props: ["element"],
  setup(props) {
    const getLowCodeInstance = inject("getLowCodeInstance") as Function;
    const lowCode: LowCodeImp = getLowCodeInstance();
    const { element } = toRefs(props);
    const dateChange = () => {
      element.value.componentProps.onChangeEvents.map(async (code: any) => {
        await lowCode.eventCenterController.fire(code);
      });
    };
    const dateFocus = () => {
      element.value.componentProps.onFocusEvents.map(async (code: any) => {
        await lowCode.eventCenterController.fire(code);
      });
    };

    // watch(reactive(element.value.componentProps), (componentProps) => {
    //   if (componentProps.eventTriggerType == "watch") {
    //     element.value.componentProps.eventCode.map((code: any) => {
    //       lowCode.eventCenterController.fire(code);
    //     });
    //   }
    // });

    return {
      element,
      dateChange,
      dateFocus,
    };
  },
});
</script>

<style  scoped>
 ::v-deep  .el-date-editor.el-input, .el-date-editor.el-input__wrapper {
  width: 100% !important;
 }

</style>
